<template>
  <div id="ServiceDetail">
    <div class="container">
      <div class="row">
        <div>
          <el-card style="width: 500px; margin: 20px auto; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1)">
            <h1 class="form-title">注册</h1>
            <form class="form" @submit.prevent="handleSubmit">
              <div class="flex-column">
                <label>用户名 </label>
              </div>
              <div class="inputForm">
                <svg height="20" viewBox="0 0 32 32" width="20" xmlns="http://www.w3.org/2000/svg">
                  <g id="Layer_3" data-name="Layer 3">
                    <path d="m30.853 13.87a15 15 0 0 0 -29.729 4.082 15.1 15.1 0 0 0 12.876 12.918 15.6 15.6 0 0 0 2.016.13 14.85 14.85 0 0 0 7.715-2.145 1 1 0 1 0 -1.031-1.711 13.007 13.007 0 1 1 5.458-6.529 2.149 2.149 0 0 1 -4.158-.759v-10.856a1 1 0 0 0 -2 0v1.726a8 8 0 1 0 .2 10.325 4.135 4.135 0 0 0 7.83.274 15.2 15.2 0 0 0 .823-7.455zm-14.853 8.13a6 6 0 1 1 6-6 6.006 6.006 0 0 1 -6 6z"></path>
                  </g>
                </svg>
                <input v-model="username" type="text" class="input" placeholder="请输入账号">
              </div>

              <div class="flex-column">
                <label>密码 </label>
              </div>
              <div class="inputForm">
                <svg height="20" viewBox="-64 0 512 512" width="20" xmlns="http://www.w3.org/2000/svg">
                  <path d="m336 512h-288c-26.453125 0-48-21.523438-48-48v-224c0-26.476562 21.546875-48 48-48h288c26.453125 0 48 21.523438 48 48v224c0 26.476562-21.546875 48-48 48zm-288-288c-8.8125 0-16 7.167969-16 16v224c0 8.832031 7.1875 16 16 16h288c8.8125 0 16-7.167969 16-16v-224c0-8.832031-7.1875-16-16-16zm0 0"></path>
                  <path d="m304 224c-8.832031 0-16-7.167969-16-16v-80c0-52.929688-43.070312-96-96-96s-96 43.070312-96 96v80c0 8.832031-7.167969 16-16 16s-16-7.167969-16-16v-80c0-70.59375 57.40625-128 128-128s128 57.40625 128 128v80c0 8.832031-7.167969 16-16 16zm0 0"></path>
                </svg>
                <input v-model="password" type="password" class="input" placeholder="请输入密码">
              </div>

              <button class="button-submit">注册</button>
              <p class="p">已有账号? <span class="span" @click="showLogin">去登录！</span></p>
            </form>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    handleSubmit() {
      if (!this.username || !this.password) {
        this.$message.error('用户名和密码不能为空');
        return;
      }

      const existingUsers = JSON.parse(sessionStorage.getItem('users')) || {};
      if (existingUsers[this.username]) {
        this.$message.error('此用户名已被注册，请更换用户名');
        return;
      }

      existingUsers[this.username] = this.password;
      sessionStorage.setItem('users', JSON.stringify(existingUsers));

      this.username = '';
      this.password = '';

      this.$message.success('注册成功');
    },
    showLogin() {
      this.$router.push({ path: '/login' });
    }
  }
}
</script>

<style scoped>
#ServiceDetail {
  background-image: url('../assets/img/s2.jpeg'); /* 背景图 */
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  padding: 40px 0;
  height: 100vh;
}

.el-card {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 15px;
  padding: 30px;
}

.form-title {
  text-align: center;
  font-size: 32px;
  color: #333;
  margin-bottom: 20px;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.inputForm {
  display: flex;
  align-items: center;
  border: 1.5px solid #dcdcdc;
  border-radius: 8px;
  padding: 10px;
  transition: all 0.3s ease;
}

.inputForm:focus-within {
  border: 1.5px solid #2d79f3;
}

.input {
  width: 85%;
  border: none;
  padding: 8px 12px;
  font-size: 16px;
  color: #333;
  border-radius: 8px;
}

.input:focus {
  outline: none;
}

.button-submit {
  background-color:rgb(154, 51, 51);
  color: white;
  padding: 15px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  transition: background-color 0.3s;
}

.button-submit:hover {
  background-color:rgb(151, 50, 53);
}

.p {
  text-align: center;
  font-size: 14px;
}

.span {
  color: #2d79f3;
  cursor: pointer;
  font-weight: bold;
}

.span:hover {
  text-decoration: underline;
}

@media (max-width: 600px) {
  #ServiceDetail {
    padding: 20px;
  }

  .el-card {
    width: 100%;
    padding: 20px;
  }

  .form-title {
    font-size: 28px;
  }
}
</style>
